<template>
  <div>
    <div id="map" v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(f, f, f, 0.8)"></div>
    <div class="content">
        <div class="item" v-for="item in $route.query.two" :key="item.id">
          <div @click="getHosMap(item.longitude,item.latitude)" class="left">
            <div>{{ item.name }}</div>
            <div v-if="item.introduce">{{ item.introduce }}</div>
            <div v-else>地址不详</div>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hos: this.$route.query.two,
      map:{},
      loading:true
    };
  },
  created() {
    // console.log(this.$route.query.two);
  },
  mounted() {
    setTimeout(() => {
      this.initMap_hos();
      this.loading = false;
    }, 2000);
  },
  methods: {
    initMap_hos() {
      this.map = new AMap.Map("map", {
        // viewMode: '3D',
        zoom: 7,
        center: [109.44504, 24.324595],
      });
      console.log(map);
      // console.log(capitals[1].center);
      console.log(this.hos);
      var certer = [];
      for (var i = 0; i < this.hos.length; i += 1) {
        var center = [this.hos[i].longitude, this.hos[i].latitude];
        var circleMarker = new AMap.CircleMarker({
          center: center,
          radius: 10 + Math.random() * 10, //3D视图下，CircleMarker半径不要超过64px
          strokeColor: "white",
          strokeWeight: 2,
          strokeOpacity: 0.5,
          fillColor: "rgba(0,0,255,1)",
          fillOpacity: 0.5,
          zIndex: 10,
          bubble: true,
          cursor: "pointer",
          clickable: true,
        });
        circleMarker.setMap(this.map);
      }
    },
      getHosMap(one,two) {
      // 创建一个 Marker 实例：
      var marker = new AMap.Marker({
        position: new AMap.LngLat(one, two), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: "北京",
      });
      this.map.add(marker);
      this.map.setZoomAndCenter(15, [one, two]);
    },
  },
};
</script>
<style scoped>
 .content .left div:nth-child(3) {
        color: #999;
        font-size: 14px;
    }
    .content .left div:nth-child(2) {
        background-color:teal;
        border-radius: 5px;
        font-size: 12px;
        display: inline;
        color: seashell;
        padding: 5px;
    }
    .content .left div {
        height: 30px;
        line-height: 30px;
    }
    .content .item {
        border-bottom: 1px solid #ccc;
        height: 70px;
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 0 20px;
    }
    .content .left {
        float: left;
    }
#map {
  float: left;
  width: 999px;
  height: 625px;
  border-radius: 10px;
}
.content {
  float: right;
  height: 600px;
  width: 200px;
  position: fixed;
  background-color: white;
  overflow-y: auto;
  top: 70px;
  right: 10px;
  width: 280px;
  border-radius: 4px;
}
.content div {
  color:#666666;
  height: 60px;
}
</style>
